/**
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/

.component-css-vars-slider() {
  --ti-slider-bg-color: var(--ti-base-color-brand-6);
  --ti-slider-height: var(--ti-common-size-2x);
  --ti-slider-border-radius: 2px;

  --ti-slider-range-height: var(--ti-common-size-4x);
  --ti-slider-range-border-radius: 2px;
  --ti-slider-range-bg-color: var(--ti-base-color-brand);
  --ti-slider-range-hover-bg-color: var(--ti-base-color-brand);
  --ti-slider-range-top: calc(-1 * var(--ti-common-space-base));
  --ti-slider-range-margin-top: calc(-1 * var(--ti-common-space-base));

  --ti-slider-handle-width: var(--ti-common-size-5x);
  --ti-slider-handle-height: var(--ti-common-size-7x);
  --ti-slider-handle-bg-color: linear-gradient(153deg, var(--ti-base-color-white), var(--ti-base-color-brand-6) 99%);
  --ti-slider-handle-border-color: var(--ti-base-color-brand);
  --ti-slider-handle-border-radius: 10px;
  --ti-slider-handle-text-color-hover: var(--ti-common-color-bg-hover);
  --ti-slider-handle-border-color-hover: var(--ti-common-color-bg-hover);
  --ti-slider-handle-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
  --ti-slider-handle-top: calc(-1 * var(--ti-common-space-base));
  --ti-slider-handle-border-weight: 1px;
  --ti-slider-handle-icon-display: inline-block;
  --ti-slider-handle-icon-fill-color: var(--ti-slider-handle-border-color);
  --ti-slider-handle-icon-fill-color-hover: var(--ti-slider-handle-text-color-hover);
  --ti-slider-handle-transform: scale(1);
  --ti-slider-handle-margin-top: -10px;
  --ti-slider-handle-margin-horizontal: -8px;
  --ti-slider-handle-margin-bottom: 0;

  --ti-slider-input-height: var(--ti-base-size-height-minor, 30px);
  --ti-slider-input-width: var(--ti-common-size-10x);
  --ti-slider-input-border-radius: var(--ti-common-border-radius-normal, 2px);
  --ti-slider-input-border-color: var(--ti-base-color-border, #d9d9d9);
  --ti-slider-input-text-color: var(--ti-base-color-info-normal, #333);
  --ti-slider-input-bg-color: var(--ti-base-color-light, #fff);

  --ti-slider-tips-bg-color: var(--ti-base-color-brand-8);
  --ti-slider-tips-border-color: var(--ti-base-color-brand-8);
  --ti-slider-tips-text-color: var(--ti-base-color-white);
  --ti-slider-tips-margin-left: 3px;

  --ti-slider-margin-vertical: -8px;
  --ti-slider-margin-right: 0;
  --ti-slider-margin-left: -6px;
}
